<template>
  <div class="main" id="inp">
    <div class="top">
      <span>分数:{{ counts }}</span>
      <span>倒计时:{{ gameDuration }}s</span>
    </div>
    <!-- 掉落物 -->
    <template v-if="Fallings.length > 0">
      <Falling
        v-for="(v, i) in Fallings"
        :key="v.id"
        :fallingInfo="v"
        :id="v.id"
        :recipient="recipient"
        @delFalling="delFalling"
        @calculateScore="calculateScore"
        :FallingConfig="FallingConfig"
      ></Falling>
    </template>
    <!-- 接收者 -->
    <div
      class="recipient"
      ref="recipient"
      id="recipient"
      :style="{ left }"
    ></div>
  </div>
</template>

<script>
import Falling from "./components/Falling";
import { FallingsInfos } from "./utils";
import { Toast } from "vant";
export default {
  name: "pickCoin",
  data() {
    return {
      FallingConfig: {
        minFallingTime: 4, //最小掉落时间
        maxFallingTime: 6, //最大掉落时间
      },
      gameDuration: 20, //游戏时长
      counts: 0, //分数
      left: "50%", //接收物距离左边的距离
      Fallings: [], //掉落物
      gameTimer: "", //随机生成掉落物定时器
      recipient: {}, //接收者DOM
    };
  },
  mounted() {
    this.recipient = this.$refs.recipient; //获取接收物Dom
    this.startGame();
  },
  components: {
    Falling,
  },
  methods: {
    //开始游戏
    startGame() {
      this.addMoveEvent();
      this.addFalling();
      this.GamecountDown();
    },
    //结束游戏
    endGame() {
      window.clearInterval(this.gameTimer);
      this.delMoveEvent();
    },
    //添加掉落物
    addFalling() {
      this.$nextTick(() => {
        let id = 0;
        this.gameTimer = setInterval(() => {
          id++;
          let index = parseInt(Math.random() * FallingsInfos.length, 10);
          let obj = Object.assign({}, FallingsInfos[index]);
          obj.id = id;
          this.Fallings.push(obj);
        }, 500);
      });
    },
    //重置游戏
    resetGame() {},
    //游戏倒计时
    GamecountDown() {
      let timer = setInterval(() => {
        if (this.gameDuration <= 0) {
          window.clearInterval(timer);
          this.endGame();
          Toast("游戏结束");
        } else {
          this.gameDuration--;
        }
      }, 1000);
    },
    //删除掉落物
    delFalling(id) {
      this.Fallings = this.Fallings.filter((v) => v.id != id);
    },
    //计算分数
    calculateScore(obj) {
      if (this.gameDuration <= 0) return;
      if (obj.type == 0) {
        this.counts = parseInt(this.counts) + obj.score;
      } else if (obj.type == 1) {
        this.counts = parseInt(this.counts) - obj.score;
      }
    },
    //添加触屏事件，监测接收者移动
    addMoveEvent() {
      document.addEventListener("touchstart", this.touch, false);
      document.addEventListener("touchmove", this.touch, false);
      document.addEventListener("touchend", this.touch, false);
    },
    //移除添加触屏事件
    delMoveEvent() {
      document.removeEventListener("touchstart", this.touch, false);
      document.removeEventListener("touchmove", this.touch, false);
      document.removeEventListener("touchend", this.touch, false);
    },
    //触屏事件
    touch(event) {
      var event = event || window.event;
      var oInp = document.getElementById("inp");
      let left;
      let clientWidth = document.documentElement.clientWidth; //获取屏幕宽度
      let recipientWidth = document.getElementById("recipient").offsetWidth; //接收物的宽度
      switch (event.type) {
        case "touchstart":
          left = event.touches[0].clientX;
          this.left = left + "px";
          break;
        case "touchend":
          left = event.changedTouches[0].clientX;
          this.left = left + "px";
          break;
        case "touchmove":
          event.preventDefault();
          left = event.touches[0].clientX;
          this.left = left + "px";
          break;
      }
    },
  },
  destroyed() {
    window.clearInterval(this.gameTimer);
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
  position: relative;
  .top {
    font-size: 16px;
    padding: 10px;
    span {
      margin-right: 20px;
    }
  }
  .recipient {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: 0;
    transform: translateX(-50%);
    background: forestgreen;
    transition: all 0.1s;
  }
}
</style>
